import {uSelectDevDataCollectConf} from '@/api/dataCollection'
import {ProductFilesItem} from '@/components/others/productFilesItem'
import {CnBoldP, CnNormalP} from '@/components/text'
import {getUserId} from '@/libs/auth'
import CollectionDevCard from './components/collectionDevCard'

export default defineComponent({
  name: 'dataOverview',
  setup() {
    const state = reactive<{
      collectionDetails: DataCollection.CollectionDetail[]
      spinning: boolean
    }>({
      collectionDetails: [],
      spinning: false
    })

    function getPageData() {
      const userId = getUserId()
      if (!userId) return
      state.spinning = true
      uSelectDevDataCollectConf({userId})
        .then(res => {
          state.collectionDetails = res.data
          state.spinning = false
        })
        .catch(err => {
          state.spinning = false
        })
    }

    onMounted(() => {
      getPageData()
    })
    return () => (
      <div>
        <CnBoldP class='mt-11 text-20 pb-24'>数据采集</CnBoldP>

        <CnNormalP class='mt-6 mb-8 text-4xText'>
          设置您想要采集的数据，以及采集数据的频率，设备将根据您的设置来匹配您的工作目标
        </CnNormalP>

        <ProductFilesItem></ProductFilesItem>

        <a-spin spinning={state.spinning}>
          <div class='mt-10 grid grid-cols-2 gap-x-20 gap-y-20'>
            {state.collectionDetails.map(item => (
              <CollectionDevCard collectionDetail={item}></CollectionDevCard>
            ))}
          </div>
        </a-spin>
      </div>
    )
  }
})
